<template>
  <div class="detail-action" v-if="orderDetail">
    <!-- 状态区域 -->
    <template v-for="(status,index) in orderDetail.status_items" :key="index">
        <div class="state" v-if="status.value == orderDetail.order.status">
            <span class="iconfont" :class="status.icon_name"></span>
            <p class="txt">{{ status.value_txt }}</p>
        </div>
    </template>

    <!-- 信息区域 -->
    <div class="info">
      <p>订单编号：{{ orderDetail.order.oid }}</p>
      <p>下单时间：{{ orderDetail.order.create_time }}</p>

      <!-- 未付款，倒计时时间还有 -->
      <span class="down-time" v-if="orderDetail.order.status===0 && orderExpireTime > -1">
        <i class="iconfont icon-daojishi"></i>
        <b>付款截止：{{timeText}}</b>
      </span>
    </div>

    <!-- 按钮区域 -->
    <div class="btn">
      <!-- 待付款 -->
      <template v-if="orderDetail.order.status === 0">
          <el-button @click="handleOrderPay(orderDetail.order.oid)" type="primary" size="large">立即付款</el-button>

          <!-- 取消订单 -->
          <el-button type="default" size="large" @click="showCancelOrder(orderDetail.order.oid)">取消订单</el-button>
      </template>

      <!-- 确认收货 -->
      <template v-if="orderDetail.order.status === 3">
          <el-button type="primary" size="large">确认收货</el-button>
      </template>

      <!-- 去评价 -->
      <template v-if="[6].includes(orderDetail.order.status) && orderDetail.order.orderItems.length == 1">
          <el-button type="primary" size="large" @click="showEvaluate(orderDetail.order.orderItems[0])">去评价</el-button>
      </template>

      <!-- 追加评价 -->
      <template v-if="[7].includes(orderDetail.order.status) && orderDetail.order.orderItems.length == 1">
          <el-button type="primary" size="large" @click="showEvaluate(orderDetail.order.orderItems[0])">追加评价</el-button>
      </template>

      <!-- 退款 -->
      <template v-if="[1,2,3,4,5].includes(orderDetail.order.status)">
          <el-button type="danger" size="large" @click="handleRefundOrder(orderDetail.order.oid)">退款</el-button>
      </template>
    </div>


    <!-- 取消订单弹层开始 -->
    <el-drawer v-model="cancelDrawerVisible" size="25%">
      <template #header>
        <div class="cancel-reason-header">取消订单原因</div>
      </template>
      <template #default>
        <div class="cancel-reason-wrap">
          <div class="reason-item" v-for="(item, index) in reasonList" :key="index" @click="handleCheckReason(item)">
            <span>{{ item }}</span>
            <i class="iconfont" :class="reason == item ? 'icon-xuanzhong active' : 'icon-weixuanzhong'"></i>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelDrawerVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCancelOrder">确定</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 取消订单弹层结束 -->
  </div>
</template>

<script setup>
import { watch, ref, reactive, inject } from 'vue'
import { usePayTime } from '@/hooks'
import { ElNotification, ElMessageBox, ElMessage, ElLoading } from 'element-plus'

// 请求接口
import { reqCancelOrderAPI, reqConfirmOrderAPI, reqRefundOrderAPI, reqPaymentOrderAPI } from '@/apis/order'
import { reqAddGoodsCommentAPI, reqAppendGoodsCommentAPI } from '@/apis/goodsEvaluate'
import { payChannel } from '@/apis/constant'

import { useUserStore } from '@/stores/modules/user'

const props = defineProps({
  orderDetail: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['updateOrderStatus', 'handleShowEvaluate'])

const { start, timeText } = usePayTime()

if (props.orderDetail.order.expire_time > -1) {
  start(props.orderDetail.order.expire_time)
}




// -------------------- 倒计时功能开始 --------------------
const orderExpireTime = ref(0)

// 监控时间
watch(timeText, async (newValue, oldValue) => {
  if (newValue == '00分00秒') {
    orderExpireTime.value = -1
    props.order.status = -1
    const result = await reqCancelOrderAPI({oid: props.order.oid, cancel_reason: '订单过期自动取消'})
    if (result.code == 200) {
      // 取消订单成功
      ElNotification({type: 'success', message: '取消订单成功'})
    }
  }
},{
  // 初始化的时候也会执行
  immediate: true,
  deep: true
})
// -------------------- 倒计时功能结束 --------------------



// ------------------- 取消订单功能开始 -------------------
// 弹出层组件
const cancelDrawerVisible = ref(false)

// 取消原因列表
const reasonList = ref([
  '商品无货',
  '不想要了',
  '商品信息填错了',
  '地址信息填写错误',
  '商品降价',
  '其它',
])

// 订单取消原因
const reason = ref('')

// 订单ID
const orderId = ref(0)

// 显示取消订单弹层
const showCancelOrder = (oid) => {
  orderId.value = oid
  reason.value = ''
  cancelDrawerVisible.value = true
}

const handleCheckReason = (cancel_reason) => {
  reason.value = cancel_reason
}

// 确定取消订单
const confirmCancelOrder = async () => {
  // 判断取消原因
  if (reason.value == '') {
      ElMessage.error('请选择取消原因!')
      return false
  }

  // 请求
  await reqCancelOrderAPI({oid: orderId.value, cancel_reason: reason.value})
  cancelDrawerVisible.value = false

  // 修改订单状态
  emit('updateOrderStatus', -1)

  ElNotification({type: 'success', message: '取消订单成功'})
}
// ------------------- 取消订单功能结束 -------------------



// ------------------- 订单支付功能开始 -------------------
const handleOrderPay = (oid) => {
  // import.meta.env.DEV
  // 后台获取微信支付的请求参数
  // const result:any = await reqMpWxPayAPI(oid)
  // wx.requestPayment(result.data)

  
  ElMessageBox.confirm('当前支付功能仅模拟模式?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await reqPaymentOrderAPI(oid)

    // 修改订单状态
    emit('updateOrderStatus', 1)

    ElNotification({type: 'success', message: '支付成功'})

    // setTimeout(() => {
    //     router.push({path: '/paymentResult', query: {oid}})
    // }, 1000)
  }).catch(() => {})
}
// ------------------- 订单支付功能结束 -------------------



// ------------------- 退款订单功能开始 -------------------
const handleRefundOrder = (oid) => {
  ElMessageBox.confirm('确定要退款吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await reqRefundOrderAPI(oid)

    // 当状态是待发货/修改订单状态
    emit('updateOrderStatus', 8)

    ElNotification({type: 'success', message: '退款成功'})
  }).catch(() => {})
}
// ------------------- 退款订单功能结束 -------------------



// ----------------- 显示评价弹层功能开始 -----------------
const showEvaluate = (orderItems) => {
  emit('handleShowEvaluate', orderItems)
}
// ----------------- 显示评价弹层功能结束 -----------------
</script>

<style scoped lang="scss">
.detail-action {
  height: 120px;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0 15px;
  .state {
    margin-right: 15px;
    .iconfont {
      font-size: 40px;
      color: $main-color;
    }
    .txt {
      padding-top: 10px;
    }
    p {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
    }
  }
  .info {
    width: 240px;
    line-height: 30px;
    p {
      color: #999;
    }

    .down-time {
      color: $price-color;
      font-weight: bold;
    }
  }
  .btn {
    flex: 1;
    text-align: right;
  }


  // 取消订单
  ::v-deep(.el-drawer__header) {
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f5f5;
  }
  .cancel-reason-header {
    font-weight: bold;
    text-align: center;
  }
  .cancel-reason-wrap {
    margin-top: 0;
    .reason-item {
      display: flex;
      justify-content: space-between;
      padding: 15px 10px;
      font-size: 18px;
      border-bottom: 1px solid #f5f5f5;
      cursor: pointer;
      .active {
        color: $main-color;
      }
      .iconfont {
        font-size: 20px;
      }
    }
  }
}


</style>